import { SettingHeader } from '@renderer/components/SettingHeader'
import { Outlet, useLocation, useNavigate } from 'react-router-dom'
import { NotebookOne, Search, SettingTwo } from '@icon-park/react'
import classNames from 'classnames'
import styles from './style.module.css'

export function Manager () {
  const navigate = useNavigate()
  const location = useLocation()

  return (
    <div className={styles.container}>
      <SettingHeader className={styles.header} />
      <div className={styles.content}>
        {/* 管理页面左侧的 navbar */}
        <div className={styles.nav}>
          <div
            className={classNames(styles.navItem, {
              [styles.activeNavItem]: location.pathname.startsWith('/manager/category/contents'),
            })}
            onClick={() => {
              navigate('/manager/category/contents')
            }}
          >
            <NotebookOne theme="outline" size="24" fill="currentColor" />
            <span>片段</span>
          </div>
          <div
            className={classNames(styles.navItem, {
              [styles.activeNavItem]: location.pathname.startsWith('/manager/setting'),
            })}
            onClick={() => {
              navigate('/manager/setting')
            }}
          >
            <SettingTwo theme="outline" size="24" fill="currentColor" />
            <span>配置</span>
          </div>
          <div
            className={classNames(styles.navItem, {
              [styles.activeNavItem]: location.pathname.startsWith('/manager/search-setting'),
            })}
            onClick={() => {
              navigate('/manager/search-setting')
            }}
          >
            <Search theme="outline" size="24" fill="currentColor"/>
            <span>搜索</span>
          </div>
        </div>
        <Outlet />
      </div>
    </div>
  )
}
